<template>
    <div class="payPassword">
        <van-popup v-model="popVisible" closeable round>
            <div class="pk-popup-wrap">
                <div class="title text-center-pk font-size-16-pk">{{popTitle}}</div>
                <div v-if="operateType === '3'" class="d-flex-cpb-pk smsCode">
                    <van-field
                            v-model.trim="smsCode"
                            type="password"
                            placeholder="输入验证码"
                            class="flex-1">
                    </van-field>
                    <send-sms-code code-type="3"></send-sms-code>
                </div>
                <div class="d-flex-cpb-pk">
                    <van-field v-model.trim="password" type="password" placeholder="支付密码"/>
                    <!-- 长按显示密码可见 后期优化 封装长按自定义指令 -->
                    <!--<van-icon name="eye-o" style="margin-right: 10px" />-->
                </div>
                <div v-if="operateType === '2' || inputAgain"  class="passwordAgain">
                    <van-field v-model.trim="passwordAgain" type="password" placeholder="再次输入"/>
                </div>
                <div class="btn">
                    <pk-button type="danger" block height="36px" :disabled="isValid" @click="handleConfirm">确定</pk-button>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script>
    import SendSmsCode from "../smsCode/SendSmsCode"
    export default {
        name: "payPassword",
        props: {
            operateType: {
                // 输入支付密码 1， 添加支付密码 2， 修改支付密码 3
                type: String,
                required: true
            }
        },
        components: {SendSmsCode},

        data() {
            return {
                password: "",//支付密码
                passwordAgain: "",//添加，再次输入
                passwordNew: "",// 修改，新密码
                smsCode: "", //修改支付密码短信验证码，
                popTitle: "请输入支付密码",
                popVisible: false,
                isValid: false,
                toastTips: false
            }
        },

        created() {
            this.setPopTitle()
        },
        computed: {
            isSetPayPassword() {
                return this.$store.state.isSetPayPassword
            },
            inputAgain() {
                //输入密码： 未设置 -> 设置，成功 -> 再次输入
                return this.operateType === "1" && !this.$store.state.isSetPayPassword
                //return !(this.operateType === "1" && this.$store.state.userInfo.isSetPayPassword == "0")
            }
        },
        watch: {
            inputAgain() {
                this.setPopTitle()
            }
        },
        methods: {
            open() {
                this.popVisible = true
            },
            setPopTitle() {
                switch (this.operateType) {
                    case "1":
                        this.popTitle = this.inputAgain ? "设置支付密码" : "请输入密码";
                        break;
                    case "2":
                        this.popTitle = "设置支付密码";
                        break;
                    case "3":
                        this.popTitle = "修改支付密码"
                }
            },
            async handleConfirm() {
                if(this.operateType === "1" && !this.inputAgain) {
                    this.$emit("change", this.password);
                    this.popVisible = false;
                    return
                }
                if((this.operateType === "1" && this.inputAgain) || this.operateType === "2") {
                    if(this.password !== this.passwordAgain) {
                        this.$toast("两次输入密码不一致");
                        return
                    }
                    let dynamicSecretKey = await this.$util.getDynamicSecretKey();
                    let password = this.$util.encrypt(this.password, dynamicSecretKey.tokenKey);
                    this.$api.modPayPassword({
                        "newPassword": password,
                        "oldPassword": '',
                        "userKey": dynamicSecretKey.userKey
                    }).then(res => {
                        let result = this.$resResult(res);
                        if(result) {
                            this.$toast.success("设置成功");
                            if(this.inputAgain) {
                                this.$store.commit("setIsSetPayPassword", true)
                            }else {
                                this.popVisible = false;
                            }
                        }
                    });
                    return;
                }
                if(this.operateType === "3" ) {
                    alert("修改支付密码，待完成")
                    return;
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .payPassword {
        .pk-popup-wrap {
            width: 80vw;
            box-sizing: border-box;
            padding: 15px 10px;
        }
        .smsCode {
            padding-right: 10px;
        }
        .title {
            padding-bottom: 8px;
            font-size: 16px;
            text-align: center;
        }
        .btn {
            padding: 15px 10px 0;
        }
    }
</style>
